{% extends 'base.html' %}
{% block head %}
    <link rel="stylesheet" href="/static/css/jquery.pagination.css"/>
    <script src="/static/js/jquery.pagination.min.js"></script>

    <style>
        .box {
            width: 800px;
            margin: 100px auto 0;
            height: 34px;
        }

        .page {
            width: 600px;
            height: 32px;
            text-align: center;
            font-size: 0;
            margin: 30px auto;
        }
    </style>


{% endblock %}
{% block middle %}
	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="user_center_info.html">· 个人信息</a></li>
				<li><a href="user_center_order.html" class="active">· 全部订单</a></li>
				<li><a href="user_center_site.html">· 收货地址</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<h3 class="common_title2">全部订单</h3>
				{% for order in order_list %}
				<ul class="order_list_th w978 clearfix">
					<li class="col01">{{ order.add_time }}</li>
					<li class="col02">订单号：{{ order.id }}</li>
					<li class="col02 stress">{% if order.state %}已支付{% else %} 未支付

					{% endif %}</li>
				</ul>
				<table class="order_list_table w980">
					<tbody>
						<tr>
							<td width="55%">
                                {% for detail in order.orderdetail_set.all %}
                                    <ul class="order_goods_list clearfix">
                                        <li class="col01"><a href="/detail_{{ detail.goods.id }}"><img src="/static/{{ detail.goods.image }}"></a></li>
                                        <li class="col02"><a href="/detail_{{ detail.goods.id }}">{{ detail.goods.name|truncatechars:15 }}</a><em>{{ detail.goods.price }}元/{{ detail.goods.unit }}</em>
                                        </li>
                                        <li class="col03">{{ detail.count }}</li>
                                        <li class="col04">{{ detail.price }}元</li>
                                    </ul>
                                {% endfor %}
							</td>
							<td width="15%">{{ order.total_price }}元</td>
							<td width="15%">{% if order.state %}已支付{% else %} 未支付

					{% endif %}</td>
							<td width="15%"><a href="javascript:void(0)" class="oper_btn">查看物流</a></td>
						</tr>
					</tbody>
				</table>
{% endfor %}
				{#分页#}
        <div class="box">
            <div id="pagination" class="page"></div>
        </div>

        <script>
            $("#pagination").pagination({
                currentPage: {{ order_list.number }},
                totalPage: {{ order_list.paginator.num_pages }},
                isShow: false,
                count: 5,
                prevPageText: "< 上一页",
                nextPageText: "下一页 >",
                callback: function (current) {
                    // alert(current);
                    location.href = '/user/order/?page=' + current;
                }
            });
        </script>
		</div>
	</div>
{% endblock middle %}